<template>
  <div class="page-mobile-teacher">
    <div class="teacher_ranking">
      <div class="teacher-bg">
        <div :class="['header-top',scroll > 0 ?'active':'']">
          <div class="header_left" @click="$router.back()">
            <van-icon name="arrow-left" style="margin-left:.2rem;" />
          </div>
          <div class="center_title">名师专区</div>
          <div class="header_right">
            <!-- <img v-if="isShowSearch" src="/img/mobile/index_nav_search.png" alt="" @click="onClickRight"> -->
          </div>
        </div>
        <div class="fixed-box"></div>
        <div class="module_zone">
          <div class="title">
            <img src="/img/mobile/teacher_menus_ranking.png" alt />
            <span>名师排行榜</span>
          </div>
          <div class="content">
            <!-- <div class="t-item" v-for="(item,index) in topThreeList" :key="index" @click="$router.push('/m/teacher-detail?id='+item.id)">
              <div class="author">
                <img v-if="item.avatar" :src="item.avatar" alt="">
                <img v-else src="/img/mobile/default-avatar.png" alt />
              </div>
              <img class="prize" v-if="index == 0" src="/img/mobile/teacher_menus_second.png" alt />
              <img class="prize" v-if="index == 1" src="/img/mobile/teacher_menus_first.png" alt />
              <img class="prize" v-if="index == 2" src="/img/mobile/teacher_menus_third.png" alt />
              <div class="info">
                <div class="teacher_name">{{item.acName}}</div>
                <div class="teacher_info">{{item.designation}}</div>
              </div>
            </div> -->
            <div class="t-item" @click="$router.push('/m/teacher-detail?id='+topThreeList[1].id)">
              <div class="author">
                <img v-if="topThreeList && topThreeList[1]" :src="topThreeList[1].avatar" alt="">
              </div>
              <img class="prize" src="/img/mobile/teacher_menus_second.png" alt />
              <div class="info" v-if="topThreeList && topThreeList[1]">
                <div class="teacher_name">{{topThreeList[1].acName}}</div>
                <div class="teacher_info">{{topThreeList[1].designation}}</div>
              </div>
            </div>
            <div class="t-item" @click="$router.push('/m/teacher-detail?id='+topThreeList[0].id)">
              <div class="author">
                <img v-if="topThreeList && topThreeList[0]" :src="topThreeList[0].avatar" alt="">
              </div>
              <img class="prize" src="/img/mobile/teacher_menus_first.png" alt />
              <div class="info" v-if="topThreeList && topThreeList[0]">
                <div class="teacher_name">{{topThreeList[0].acName}}</div>
                <div class="teacher_info">{{topThreeList[0].designation}}</div>
              </div>
            </div>
            <div class="t-item" @click="$router.push('/m/teacher-detail?id='+topThreeList[2].id)">
              <div class="author">
                <img v-if="topThreeList && topThreeList[2]" :src="topThreeList[2].avatar" alt="">
              </div>
              <img class="prize" src="/img/mobile/teacher_menus_third.png" alt />
              <div class="info" v-if="topThreeList && topThreeList[2]">
                <div class="teacher_name">{{topThreeList[2].acName}}</div>
                <div class="teacher_info">{{topThreeList[2].designation}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="teacher_list">
      <div class="title">
        <img src="/img/mobile/teacher_menus_recommend.png" alt />
        <span>名师推荐</span>
      </div>
      <div class="list-content">
        <div class="item-box" v-for="(item,index) in remainList" :key="index" @click="$router.push('/m/teacher-detail?id='+item.id)">
          <div class="box-left">
            <img v-if="item.avatar" :src="item.avatar" alt="">
            <img v-else src="/img/mobile/default-avatar.png" alt />
          </div>
          <div class="box-right">
            <div class="right-top">
              <div class="t-i-name">{{item.acName}}</div>
              <div class="t-i-des">
                <img src="/img/mobile/teacher_menus_title.png" alt />
                <div class="school">{{item.designation}}</div>
              </div>
            </div>
            <div class="right-bottom">
              简介：{{item.ftIntroduce}}
            </div>
          </div>
        </div>
        <!-- <div class="item-box">
          <div class="box-left">
            <img src alt />
          </div>
          <div class="box-right">
            <div class="right-top">
              <div class="t-i-name">刘健健</div>
              <div class="t-i-des">
                <img src="/img/mobile/teacher_menus_title.png" alt />
                <div class="school">复旦大学教授</div>
              </div>
            </div>
            <div class="right-bottom">
              简介：复旦大学教授复旦大学教授复旦大学教授复旦大学教授复旦大学教授复旦大学教授复旦大学教授复旦大学教授
            </div>
          </div>
        </div> -->
      </div>
      <van-empty description="暂无更多教师！" v-show="remainList.length == 0" />
      <div class="footer" v-show="remainList.length != 0">
        <span class="tips">我是有底线的</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { getTeacherZone } from "~/api/teacher";
export default {
  props: ["setDisabled", "refreshFun", "setLoading"],
  components: {},
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      scroll_heigth: 0,
      title: "",
      teacherList: [],
      scroll: 0,
    };
  },
  computed: {
    ...mapState({
      token(state) {
        return state.token;
      },
      user_info(state) {
        return state.user_info;
      },
      is_loading(state) {
        return state.is_loading;
      },
      is_member(state) {
        return JSON.stringify(state.member_info) != "{}";
      },
      user_member(state) {
        return state.member_info;
      },
    }),
    topThreeList(){
      return this.teacherList.filter((item,index)=>index < 3);
    },
    remainList(){
      return this.teacherList.filter((item,index)=>index >= 3);
    }
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    async getData(fetch_type) {
      this.SET_IS_LOADING(true);
      let params = {
        offset: this.pageSize * (this.page - 1),
        limit: this.pageSize,
      };
      let result = await getTeacherZone(params);
      console.log("老师列表", result);
      if (result && result.data.code == 200) {
        this.SET_IS_LOADING(false);
        if (fetch_type == "pullup") {
          this.teacherList = [...this.teacherList, ...result.data.data.rows];
        } else {
          this.teacherList = result.data.data.rows;
        }
        this.total = result.data.data.total;
      } else {
        this.SET_IS_LOADING(false);
        
      }
    },
    initPage() {
      return new Promise((res, rej) => {
        if (process.client) {
          try {
            this.getData();
            res("success");
          } catch (e) {
            console.log(e);
            rej(e);
          }
        }
      }).then();
    },
    throttle(fn, delay) {
      let lastTime = 0;
      return !(function () {
        let nowTime = Date.now();
        if (nowTime - lastTime > delay) {
          fn.call(this);
          lastTime = nowTime;
        }
      })();
    },
    pullUp() {
      // 滚动条离顶部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 窗口可视区域高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 滚动区域高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 滚动条 + 可视区域高度 >= 滚动条高度 ==>  滚动条触底
      if (scrollTop + clientHeight >= scrollHeight - 120) {
        console.log("上拉加载");
        if (this.total <= this.teacherList.length) {
          return;
        }
        if (this.is_loading) {
          return;
        }
        this.page++;
        this.getData("pullup");
      }
    },
    eventListener() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      this.throttle(this.pullUp, 30);
    },
    initState() {
      this.page = 1;
      this.pageSize = 10;
      this.total = 0;
    },
  },
  activated() {
    if (process.client) {
      this.$nextTick(() => {
        setTimeout(() => {
          document.body.scrollTop = this.scroll_heigth;
          document.documentElement.scrollTop = this.scroll_heigth;
        }, 0);
      });
      window.addEventListener("scroll", this.eventListener);
      this.initPage();
    }
    this.setDisabled(false);
    this.refreshFun(() => {
      this.page =  1;
      this.pageSize = 10;
      this.total = 0;
      this.initPage()
        .then((res) => {
          if (res == "success") {
            this.setLoading(false);
          }
        })
        .catch(() => {
          this.setLoading(false);
          this.SET_IS_LOADING(false);
        });
    });
  },
  deactivated() {
    let scroll_heigth =
      document.documentElement.scrollTop || document.body.scrollTop;
    this.scroll_heigth = scroll_heigth;
    this.initState();
    this.setDisabled(true);
    window.removeEventListener("scroll", this.eventListener);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.eventListener);
  },
  created() {
    //开启下拉刷新
    this.setDisabled(false);
    //初始化页面数据
    this.initPage();
    //下拉回调
    this.refreshFun(() => {
      this.page =  1;
      this.pageSize = 10;
      this.total = 0;
      this.initPage()
        .then((res) => {
          if (res == "success") {
            this.setLoading(false);
          }
        })
        .catch(() => {
          this.setLoading(false);
          this.SET_IS_LOADING(false);
        });
    });
  },
  mounted() {
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
    }
  },
};
</script>

<style lang="scss" scoped>
.page-mobile-teacher {
  width: 100vw;
  min-height: 100vh;
  background: #f7f7fa;
  .teacher_ranking {
    width: 100%;
    height: 6.336rem;
    background: var(--theme-color);
    .teacher-bg {
      width: 100%;
      height: 100%;
      background-image: url("/img/mobile/teacher-bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .header-top {
        width: 7.2rem;
        height: 0.9rem;
        z-index: 999999;
        position: fixed;
        top: 0;
        left: 0;
        line-height: 0.9rem;
        display: flex;
        align-items: center;
        box-shadow: none;
        .header_left {
          width: 15%;
          color: #ffffff;
          font-size: 0.35rem;
          display: flex;
          align-items: center;
        }
        .center_title {
          width: 70%;
          text-align: center;
          font-size: 0.3456rem;
          color: #ffffff;
          font-weight: bold;
        }
        .header_right {
          width: 15%;
          img {
            margin: 0 auto;
            display: block;
            width: 0.6111rem;
            height: 0.6111rem;
          }
        }
      }
      .header-top.active {
        background: var(--theme-color);
      }
      .fixed-box {
        width: 100%;
        height: 0.9rem;
      }
      .module_zone {
        .title {
          display: flex;
          align-items: center;
          color: #ffffff;
          font-size: 0.3rem;
          padding: 0 0.2rem;
          font-weight: bold;
          img {
            display: block;
            width: 0.6rem;
            height: 0.6rem;
          }
        }
        .content {
          margin-top: 0.6rem;
          display: flex;
          justify-content: center;
          align-items: center;
          .t-item {
            width: 2.314rem;
            height: 3rem;
            background: #ffffff;
            border-radius: 0.1rem;
            box-shadow: 0px 3px 8px #e0e0e0;
            position: relative;
            margin:0 .1rem;
            .author {
              width: 1.2rem;
              height: 1.2rem;
              background: var(--theme-color);
              border-radius: 50%;
              margin: 0.2rem auto 0;
              border: 2px solid #ffffff;
              box-shadow: 0px 0px 20px #e0e0e0;
              overflow: hidden;
            }
            .prize {
              position: absolute;
              left: 50%;
              top: 0.38rem;
              width: 1.3rem;
              height: 1.14rem;
              transform: translateX(-50%);
            }
            .info {
              margin-top: 0.4rem;
              text-align: center;
              .teacher_name {
                font-size: 0.35rem;
                line-height: 0.5rem;
                font-weight: bold;
                color: #313233;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .teacher_info {
                font-size: 0.3rem;
                color: #adafb3;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
          .t-item:first-child {
            width: 1.928rem;
            height: 2.5rem;
            margin:0 .05rem;
            .author {
              width: 1rem;
              height: 1rem;
            }
            .prize {
              top: 0.36rem;
              width: 1.1rem;
              height: .94rem;
            }
            .info {
              .teacher_name {
                font-size: 0.3rem;
                line-height: 0.4rem;
              }
              .teacher_info {
                font-size: 0.24rem;
              }
            }
          }
          .t-item:last-child {
            width: 1.928rem;
            height: 2.5rem;
            margin:0 .05rem;
            .author {
              width: 1rem;
              height: 1rem;
            }
            .prize {
              top: 0.36rem;
              width: 1.1rem;
              height: .94rem;
            }
            .info {
              .teacher_name {
                font-size: 0.3rem;
                line-height: 0.4rem;
              }
              .teacher_info {
                font-size: 0.24rem;
              }
            }
          }
        }
      }
    }
  }
  .teacher_list {
    margin-top: -0.6rem;
    width: 100%;
    .title {
      display: flex;
      align-items: center;
      color: #313233;
      font-size: 0.3rem;
      padding: 0 0.2rem;
      font-weight: bold;
      img {
        display: block;
        width: 0.6rem;
        height: 0.6rem;
      }
    }
    .list-content {
      padding: 0.3rem;
      box-sizing: border-box;
      width: 100%;
      .item-box {
        width: 100%;
        height: 2.2rem;
        background: #ffffff;
        margin-bottom: 0.4rem;
        border-radius: 0.2rem;
        box-shadow: 0px 0px 20px #e0e0e0;
        display: flex;
        .box-left {
          width: 32%;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            display: block;
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            overflow: hidden;
            background: var(--theme-color);
          }
        }
        .box-right {
          width: 68%;
          padding: .4rem .2rem;
          box-sizing: border-box;
          .right-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .t-i-name {
              width: 1.2rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 0.3rem;
              font-weight: bold;
            }
            .t-i-des {
              font-size: 0.3rem;
              display: flex;
              align-items: center;
              img {
                width: 0.5rem;
                height: 0.5rem;
                display: block;
              }
              .school{
                max-width: 2rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
          .right-bottom{
            font-size: .26rem;
            color: #adafb3;
            line-height: .4rem;
            margin: .2rem 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
    .footer {
      padding: 0.3rem;
      font-size: 0.26rem;
      color: #babec2;
      text-align: center;
      .tips {
        position: relative;
      }
      .tips::before {
        content: "";
        display: block;
        position: absolute;
        left: -1.7rem;
        top: 50%;
        transform: translateY(-1px);
        width: 1.5rem;
        height: 1px;
        background: #babec2;
      }
      .tips::after {
        content: "";
        display: block;
        position: absolute;
        right: -1.7rem;
        top: 50%;
        width: 1.5rem;
        transform: translateY(-1px);
        height: 1px;
        background: #babec2;
      }
    }
  }
}
</style>
<style lang="scss">
.page-mobile-teacher {
}
</style>
